<template>
  <div class="content">
    <h2>info: {{ info }}</h2>
    <h2>info: {{ name }} - {{ age }}</h2>
    <button @click="age++">+1</button> <!--不生效--> 
    <h2>info: {{ ageRef }}</h2>
    <button @click="ageRef++">ageRef+1</button>
    <h2>info:height: {{ height }}</h2>
    <button @click="height++">height+1</button>
  </div>
</template>

<script>
import { reactive, toRefs, toRef } from 'vue';

  export default {
    setup() {
      const info =reactive({
        name:"why",
        age: 18,
        nameRef: "why",
        ageRef: 18,
        height: 1.88
      })
      // reactive解构后会变成普通的值,不能响应式
      const {name, age} = info
      const {nameRef, ageRef} = toRefs(info)
      const height = toRef(info, "height")

      return {
        info,
        name,
        age,
        nameRef,
        ageRef,
        height
      }
    }
  }
</script>

<style scoped>
</style>